import React from 'react'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import { Card } from 'antd';
export default () => {

    const buyerList = [
        { title: "订单创建通知" },
        { title: "订单关闭通知" },
        { title: "订单完成通知" },
        { title: "订单支付通知" },
        { title: "订单发货通知" },
        { title: "订单收货通知" },
        { title: "商家同意退款" },
        { title: "商家拒绝退款" },
        { title: "核销通知" },
        { title: "注册验证" },
        { title: "注册成功" },
        { title: "找回密码" },
        { title: "会员登录" },
        { title: "账户绑定" },
        { title: "动态码登录" },
        { title: "支付密码修改" },
    ];

    const sellerList: any[] = [
        { title: "买家发起退款提醒" },
        { title: "买家已退货提醒" },
    ];
    return (
        <PageHeaderWrapper title={false}>
            <Card>
                <nav style={{ borderLeft: "4px solid #4685FD", paddingLeft: "10px", marginBottom: "28px", fontWeight: 600, fontSize: "16px" }}>买家消息</nav>
                <ul style={{ margin: 0, padding: 0, display: "flex", flexWrap: "wrap" }}>
                    {
                        buyerList.map((item: any, inx: number) => <li key={inx} style={{ width: "20%", paddingRight: "20px", marginBottom: "20px" }}>
                            <div style={{ backgroundColor: "#F2F3F5", display: "flex", padding: "15px", justifyContent: "space-between", alignItems: "center" }} onMouseOver={() => {
                                console.log(123)
                            }}>
                                <span>{item.title}</span>
                                <div style={{ paddingLeft: "10px", fontSize: "12px", fontWeight: 600 }}>
                                    <span style={{ marginRight: "5px" }}>邮箱</span>
                                    <span>短信</span>
                                </div>
                            </div>
                        </li>)
                    }
                </ul>
                <nav style={{ borderLeft: "4px solid #4685FD", paddingLeft: "10px", margin: "28px 0", fontWeight: 600, fontSize: "16px" }}>卖家通知</nav>
                <ul style={{ margin: 0, padding: 0, display: "flex", flexWrap: "wrap" }}>
                    {
                        sellerList.map((item: any, inx: number) => <li key={inx} style={{ width: "20%", paddingRight: "20px", marginBottom: "20px" }}>
                            <div style={{ backgroundColor: "#F2F3F5", display: "flex", padding: "15px", justifyContent: "space-between", alignItems: "center" }} onMouseOver={() => {
                                console.log(123)
                            }}>
                                <span>{item.title}</span>
                                <div style={{ paddingLeft: "10px", fontSize: "12px", fontWeight: 600 }}>
                                    <span style={{ marginRight: "5px" }}>邮箱</span>
                                    <span>短信</span>
                                </div>
                            </div>
                        </li>)
                    }
                </ul>
            </Card>
        </PageHeaderWrapper>
    )
}